<template>
  <div>
    <el-card>
      <el-row class="bigbox">
        <!-- <h1>设备管理</h1> -->
        <el-form :inline="true" :model="params" class="demo-form-inline">
          <div class="inbox">
            <el-form-item label="设备编号:">
              <el-input clearable class="input" v-model="params.innerCode" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="btn" icon="el-icon-search" type="primary" @click="inquire">查询</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-row>
    </el-card>
    <!-- 底部 -->
    <div class="bodys">
      <div class="hearder_botton">
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="openadd">新建</el-button>
        <el-button type="default">批量操作</el-button>
      </div>
      <BodyTable :tableData="tableData" @revisevm="revisevmFn"></BodyTable>
      <!-- 弹出框 -->
      <AddVmDialogVue ref="AddVmDialogVue" :visible.sync="visible" @updataList="getvmlistApi"></AddVmDialogVue>
      <!-- 分页 -->
      <div class="divvvvv">
        <el-row class="page" type="flex">
          <el-col :span="2">共{{ totalCount }}条记录</el-col>
          <el-col :span="2">第 {{ params.pageIndex + '/' + totalPage }} 页</el-col>
          <el-col :span="16"></el-col>
          <el-col :span="2">
            <el-button type="primary" :disabled="params.pageIndex === 1" @click="changePage(1)">上一页</el-button>
          </el-col>
          <el-col :span="2">
            <el-button
              type="primary"
              :disabled="params.pageIndex > totalPage-1 "
              @click="changePage(1)"
            >下一页</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 其他弹窗 -->
    <!-- 修改按钮弹窗 -->
    <IndexUpdateVue ref="IndexUpdateVue" :updatevisible="updatevisible" @closeupdate="closeupdate"></IndexUpdateVue>
  </div>
</template>

<script>
// 引入子组件
import BodyTable from './components/bodytable.vue'
import addvmdialogVue from './components/addvmdialog.vue'
// 修改按钮组件
import indexupdateVue from './components/indexupdate.vue'
// 接口
import { getvmlist } from '@/api/vm'
export default {
  name: 'Dkd3Index',
  components: {
    BodyTable: BodyTable,
    AddVmDialogVue: addvmdialogVue,
    IndexUpdateVue: indexupdateVue
  },
  data () {
    return {
      // formLabelWidth: '120px',
      formInline: {},
      // 页面一进去的params
      params: {
        pageIndex: 1,
        pageSize: 10,
        status: null,
        innerCode: null
      },
      //
      tableData: [],
      //
      totalCount: 0,
      totalPage: 0,
      // 新增按钮弹出框
      visible: false,
      // 修改按钮弹出框
      updatevisible: false
      // revisevmdate: {} // 修改按钮的数据
    }
  },

  mounted () {
    this.getvmlistApi()
  },

  methods: {
    // 获取所有售货机
    async getvmlistApi () {
      const res = await getvmlist(this.params)
      // console.log(res)
      this.tableData = res.data.currentPageRecords
      //
      //
      this.totalCount = res.data.totalCount
      this.totalPage = res.data.totalPage
      console.log(this.totalCount, this.totalPage) // 查看总数和当前页
    },
    // 点击查询
    async inquire () {
      console.log(this.params.innerCode)
      console.log(this.params)
      this.tableData = []
      const res = await getvmlist(this.params)
      console.log(res)
      this.tableData = res.data.currentPageRecords
    },
    // 分页切换
    async changePage (val) {
      val === 1 ? (this.params.pageIndex -= 1) : (this.params.pageIndex += 1)
      this.getvmlistApi()
    },
    // 打开添加弹出框
    async openadd () {
      this.visible = true
    },
    //
    //
    //
    // 储存修改按钮发过来的数据
    revisevmFn (row) {
      // console.log(row)
      // console.log(this.revisevmdate)
      // this.revisevmdate = { ...row }
      this.updatevisible = true
      this.$refs.IndexUpdateVue.revisevmdate = { ...row }
    },
    closeupdate () {
      this.updatevisible = false
      // this.$refs.IndexUpdateVue.revisevmdate = []
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .spans {
  margin-bottom: 25px;
}
.divvvvv {
  margin-top: 25px;
}
/deep/ .el-card__body {
  // background-color: pink;
  padding-top: 0px;
  padding-right: 0px;
  padding-left: 0px;
  padding-bottom: 0px;
  height: 64px;
}
.bigbox {
  // background-color: red;
  .inbox {
    display: flex;
    /deep/ .el-form-item {
      /deep/ .el-form-item__label {
        margin-left: 5px;
      }
      // background-color: pink;
      margin-top: 11px;
      margin-left: 5px;
      /deep/ .el-icon-search {
        font-size: 18px;
        line-height: 11px;
      }
      .input {
        margin-left: 0px;
      }
      .btn {
        // margin-top: 1px;
        width: 80px;
        height: 36px;
        line-height: 10px;
      }
    }
  }
}
//
.bodys {
  /deep/ .inputtt {
    background-color: red;
    width: 396px;
  }
  background-color: #fff;
  padding: 20px 15px 19px 17px;
  // 按钮
  .hearder_botton {
    display: flex;
    margin-bottom: 20px;
    .el-button--primary {
      background: linear-gradient(135deg, #ff9743, #ff5e20);
      border: 0;
    }
    .el-button--default {
      background-color: #fbf4f0;
      border: 0;
    }
  }
}
</style>
